import './style.scss'
import { useAppDispatch, useAppSelector } from '@/store';
import layerSlice from '@/reducers/layerSlice';
import {
  CaretDownOutlined,
  DeleteOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import { useState } from 'react'
import { renderer } from '@/core/renderer';

export default () => {
  const dispatch = useAppDispatch();
  const [expand, setExpand] = useState(true);
  const layerState = useAppSelector(state => state.layers)

  return <>
    <div className={`instrument-module ${expand ? 'expand' : ''}`}>
      <div className="instrument-module-header" onClick={() => setExpand(!expand)}>
        <div className="instrument-module-header__name">图层</div>
        <div className='instrument-module-header__control'>
          <CaretDownOutlined rotate={expand ? 180 : 0} />
        </div>
      </div>
      <div className="instrument-module-content">
        <div className="layer-list">
          {
            layerState.list.map(item => {
              if(item.visible){
                return <div 
                  key={item.id} 
                  className={`layer-row ${layerState.active?.id === item.id ? 'active' : ''} ${item.opacity === 0 ? 'viwer-hide' : ''}`}
                  onClick={() => {
                    dispatch(layerSlice.actions.activate(item.id))
                  }}
                >
                  <div className='layer-row-viewer'>
                    <Tooltip title={`${item.opacity === 0 ? '显示' : '隐藏'}图层`} placement="leftTop" arrow={false}>
                      <Button icon={<EyeOutlined />} type='text' onClick={(e) => {
                        e.stopPropagation()
                        renderer.update(item.id, {
                          opacity: item.opacity === 0 ? 1 : 0
                        }, dispatch)
                      }}></Button>
                    </Tooltip>
                  </div>
                  <div className='layer-row-name'>{ item.name }</div>
                  <div className="layer-row-control">
                    <Tooltip title="删除图层" placement="leftTop" arrow={false}>
                      <Button icon={<DeleteOutlined />} onClick={(e) => {
                        e.stopPropagation()
                        renderer.remove(item.id, dispatch)
                      }}></Button>
                    </Tooltip>
                  </div>
                </div>
              }
              else return ''
            })
          }
        </div>
      </div>
    </div>
  </>
}